<template>
	<div>
		<div class="line"></div>
		<mnav></mnav>
	  <div class="hello" >
	  	<keep-alive>
		   	<slide-nav>
		   	</slide-nav>
	   	</keep-alive>
	   	<div class="pTop20">
	   		<mcontent :content="showList"></mcontent>
	   	</div>
	  </div>
  </div>
</template>

<script>
	import axios from 'axios'
	import mnav from 'components/nav/nav';
	import slideNav from 'components/slide/slide';
	import {domain} from '@/config/config';
	import mcontent from 'base/content/content';
	const listNum=20;
	let doc="";
	let dis=0;
	let isAdd=true;
export default {
  name: 'HelloWorld',
  data () {
    return {
      contentList:[],
      showList:[],
      isScroll:true
    }
  },
  created(){
  	this._initCotent()
  },
  mounted(){
  	this.addList()
  },
beforeRouteLeave (to,from,next){
	console.log(to)
	this.$store.commit("setCurTid",{
				curTid:to.params.tid 
		})
	next()
},
  activated(){
  	this.isScroll=true
  },
  deactivated(){
  	this.isScroll=false
  },
  methods:{
  	addList(){
//		if(!this.showList.length){
  			window.addEventListener("scroll",()=>{
  					if(this.isScroll){
	  						if(!isAdd){return}
	  					isAdd=false;
		  				setTimeout(()=>{
		  						doc=document.body||document.documentElement;
	//	  			1.总高度
	//						console.log("总高度",doc.offsetHeight)
		//					2.当前高度
	//						console.log("当前高度",doc.scrollTop)
									console.log(111)
									isAdd=true;
									dis=((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10|0;
					  			if(dis<=4&&this.contentList.length){
					  				this._ShowList()
					  			}
		  				},500)
  					}

  		})
//		}
  	},
  	_ShowList(){
  		let con=this.contentList.splice(0,listNum)
			this.showList=this.showList.concat(con)
  	},
  	_initCotent(){
  		axios.get('/x/web-interface/ranking',{
  			params:{
  				rid:0,
					day:3,
					jsonp:'jsonp'
  			}
  		}).then((res)=>{
  			this.contentList=res.data.data.list;
  		}).then(()=>{
  			this._ShowList();
  		})
  	}
  },
  components:{
  	slideNav,
  	mcontent,
  	mnav,
  	
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.pTop20{
	padding-top: 20px;
}
</style>
